<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>zoom</title>
    <style>
        #preview {
            position: absolute;
            top: 50px;
            left: 250px;
            width: 352px;
        }
        #preview>#mediumDiv
        {
            width: 350px;
            height: 350px;
            border: 1px solid #ddd;
            margin-bottom: 5px;
            text-align:center;
            position: relative;
        }
        #preview>#mediumDiv img
        {
            vertical-align:middle;
            width:350px;
            height:350px;
        }
        #preview>#mediumDiv>#mask{
            position: absolute;
            width: 175px;
            height: 175px;
            background: #ffa;
            opacity: 0.5;
            top: 0;
            left: 0;
            display:none;
        }
        #preview>#mediumDiv>#superMask{
            position: absolute;
            width: 350px;
            height: 350px;
            opacity: 0;
            top: 0;
            left: 0;
            cursor: move;
        }
        #preview>#largeDiv{
            position: absolute;
            width: 400px;
            height: 400px;
            /*background: #fff;*/
            background-image: url(../images/products/product-s1-l.jpg);
            border: 1px solid #ddd;
            top: 0;
            left: 355px;
            z-index: 999;
            display: none;
        }
        #preview h1
        {
            width: 352px;
            height: 54px;
            overflow:hidden;
            padding: 0px;
            position:relative;
        }
        /*前后移动的按钮*/
        #preview a.backward,#preview a.forward,#preview a.backward_disabled,#preview a.forward_disabled {
            width: 17px;
            height: 54px;
            background-image: url(../images/iconlist_1.png);
            background-repeat: no-repeat;
            display:block;
            z-index:20;
            position:absolute;
            top:0px;
        }
        #preview a.backward,#preview a.backward_disabled {
            left:0px;
        }
        #preview a.forward,#preview a.forward_disabled {
            right:0px;
        }
        #preview a.backward {
            background-position: 0px -139px;
        }
        #preview a.backward:hover {
            background-position: -34px -139px;
        }
        #preview a.backward_disabled {
            background-position: -68px -139px;
        }
        #preview a.forward {
            background-position: -17px -139px;
        }
        #preview a.forward:hover {
            background-position: -51px -139px;
        }
        #preview a.forward_disabled {
            background-position: -85px -139px;
        }

        /*产品的图标列表*/
        #preview #icon_list {
            height: 54px;
            position:absolute;
            left: 20px;
            top: 0px;
            padding:0;
        }
        #preview #icon_list li {
            width: 62px;
            text-align: center;
            float: left;
        }
        #preview #icon_list li img {
            width: 50px;
            height: 50px;
            padding: 1px;
            border: 1px solid #CECFCE;
        }
        #preview #icon_list li img:hover {
            border: 2px solid #e4393c;
            padding: 0;
        }
    </style>
</head>
<body>
<div id="preview">
    <div id="mediumDiv">
        <img id="mImg" src="../images/products/product-s1-m.jpg"/>
        <div id="mask"></div>
        <div id="superMask"></div>
    </div>
    <div id="largeDiv"></div>
    <h1>
        <a class="backward_disabled"></a>
        <a class="forward"></a>
        <ul id="icon_list">
            <li><img src="../images/products/product-s1.jpg"/></li>
            <li><img src="../images/products/product-s2.jpg"/></li>
            <li><img src="../images/products/product-s3.jpg"/></li>
            <li><img src="../images/products/product-s4.jpg"/></li>
            <li><img src="../images/products/product-s1.jpg"/></li>
            <li><img src="../images/products/product-s2.jpg"/></li>
            <li><img src="../images/products/product-s3.jpg"/></li>
            <li><img src="../images/products/product-s4.jpg"/></li>
        </ul>
    </h1>
</div>
<script src="../js/jquery-1.11.3.js"></script>
<script>
    var zoom={
        moved:0,//保存左移的li个数
        WIDTH:62,//保存每个li的宽度
        OFFSET:20,//保存ul的起始left值
        MAX:3,//保存可左移的最多li个数
        MSIZE:175,//保存mask的大小
        MAXLEFT:175,MAXTOP:175,//保存mask可用的最大坐标
        init:function(){
            //为id为preview下的h1添加单击事件代理，仅a能响应事件，事件处理函数为move
            $("#preview>h1").on(
                    "click","a",this.move.bind(this));
            //为id为icon_list的ul添加鼠标进入事件代理，仅li下的img可响应事件，处理函数为changeImgs
            $("#icon_list").on(
                    "mouseover","li>img",this.changeImgs);
            //为id为superMask的div添加hover事件,切换mask的显示和隐藏,再绑定鼠标移动事件为moveMask
            $("#superMask").hover(this.toggle,this.toggle)
                    .mousemove(
                    this.moveMask.bind(this));
        },
        moveMask:function(e){
            var x=e.offsetX;//获得鼠标相对于父元素的x
            var y=e.offsetY;//获得鼠标相对于父元素的y
            //计算mask的left: x-MSIZE/2
            var left=x-this.MSIZE/2;
            //计算mask的top: y-MSIZE/2
            var top=y-this.MSIZE/2;
            //如果left越界，要改回边界值
            left=left<0?0:
                    left>this.MAXLEFT?this.MAXLEFT:
                            left;
            //如果top越界，要改回边界值
            top=top<0?0:
                    top>this.MAXTOP?this.MAXTOP:
                            top;
            //设置id为mask的元素的left为left,top为top
            $("#mask").css({left:left,top:top});
            //设置id为largeDiv的背景图片位置:
            $("#largeDiv").css(
                    "backgroundPosition",
                    -left*16/7+"px "+-top*16/7+"px");
        },
        toggle:function(){//切换mask的显示和隐藏
            $("#mask").toggle();
            $("#largeDiv").toggle();
        },
        move:function(e){//移动一次
            var $target=$(e.target);//获得目标元素$target
            var btnClass=$target.attr("class");
            //如果btnClass中没有disabled
            if(btnClass.indexOf("disabled")==-1){
                //如果btnClass以forward开头
                //将moved+1
                //否则
                //将moved-1
                this.moved+=
                        btnClass.indexOf("forward")!=-1?1:-1;
                //设置id为icon_list的ul的left为-moved*WIDTH+OFFSET
                $("#icon_list").css(
                        "left",-this.moved*this.WIDTH+this.OFFSET);
                this.checkA();//检查a的状态:
            }
        },
        checkA:function(){//检查两个a的状态
            //查找class属性以backward开头的a，保存在$back
            var $back=$("a[class^='backward']");
            //查找class属性以forward开头的a，保存在$for
            var $for=$("a[class^='forward']");
            if(this.moved==0){//如果moved等于0
                //设置$back的class为backward_disabled
                $back.attr("class","backward_disabled");
            }else if(this.moved==this.MAX){
                //否则，如果moved等于MAX
                //设置$for的class为forward_disabled
                $for.attr("class","forward_disabled");
            }else{//否则
                //$back的class为backward
                $back.attr("class","backward");
                //$for的class为forward
                $for.attr("class","forward");
            }
        },
        changeImgs:function(e){//根据小图片更换中图片
            //获得目标元素的src属性，保存在变量src中
            var src=$(e.target).attr("src");
            //查找src中最后一个.的位置i
            var i=src.lastIndexOf(".");
            //设置id为mImg的元素的src为:
            //src从开头-i 拼上-m  拼上src从i到结尾
            $("#mImg").attr(
                    "src",src.slice(0,i)+"-m"+src.slice(i));
            $("#largeDiv").css(
                    "backgroundImage",
                    "url("+src.slice(0,i)+"-l"+src.slice(i)+")"
            );
        }
    }
    zoom.init();
</script>
</body>
</html>